<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无缝滚动2</title>
    <link rel="stylesheet" href="./banner.css" />
    <script src="./animate.js"></script>
</head>

<body>
    <div class="banner">

        <!-- 轮播图 -->
        <ul class="imgBox clearFix">
            <li class="slider" style="background-color: red">1</li>
            <li class="slider" style="background-color: orange">2</li>
            <li class="slider" style="background-color: green">3</li>
            <li class="slider" style="background-color: pink">4</li>
            <li class="slider" style="background-color: yellow">5</li>
        </ul>

        <!-- 指示器存放处 -->
        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a class="prev">&lt;</a>
            <a class="next">&gt;</a>
        </div>
    </div>

    <script>
        var ul = document.querySelector(".imgBox")
        var btnPrev = document.querySelector(".prev")
        var btnNext = document.querySelector(".next")

        currentIndex = 0

        function prev() {
            currentIndex--

            animate(
                ul,
                { left: -600 * currentIndex + "px" },
                1000,
                function () {
                    console.log("动画结束");
                }
            )
        }

        function next() {
            currentIndex++

            animate(
                ul,
                { left: -600 * currentIndex + "px" },
                1000,
                function () {
                    console.log("动画结束");
                }
            )
        }

        btnPrev.onclick = function (e) {
            prev()
        }
        btnNext.onclick = function (e) {
            next()
        }
    </script>

</body>

</html>